<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>部署 | manoeasy</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/manoeasy/favicon.ico">
    <link rel="manifest" href="/manoeasy/manifest.json">
    <meta name="description" content="Vue-powered Static Site Generator">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="/manoeasy/assets/css/0.styles.be905fd2.css" as="style"><link rel="preload" href="/manoeasy/assets/js/app.af965ea1.js" as="script"><link rel="preload" href="/manoeasy/assets/js/4.127e46f3.js" as="script"><link rel="preload" href="/manoeasy/assets/js/27.cb0519da.js" as="script"><link rel="preload" href="/manoeasy/assets/js/5.49171081.js" as="script"><link rel="prefetch" href="/manoeasy/assets/js/10.da3941ef.js"><link rel="prefetch" href="/manoeasy/assets/js/11.b025af38.js"><link rel="prefetch" href="/manoeasy/assets/js/12.dbb059af.js"><link rel="prefetch" href="/manoeasy/assets/js/13.1a261b87.js"><link rel="prefetch" href="/manoeasy/assets/js/14.5a15bbc3.js"><link rel="prefetch" href="/manoeasy/assets/js/15.7b5c55db.js"><link rel="prefetch" href="/manoeasy/assets/js/16.6df6379b.js"><link rel="prefetch" href="/manoeasy/assets/js/17.516c2569.js"><link rel="prefetch" href="/manoeasy/assets/js/18.f0081dd1.js"><link rel="prefetch" href="/manoeasy/assets/js/19.4e4dad1d.js"><link rel="prefetch" href="/manoeasy/assets/js/20.3a3eefbb.js"><link rel="prefetch" href="/manoeasy/assets/js/21.297dfcc9.js"><link rel="prefetch" href="/manoeasy/assets/js/22.d6da5142.js"><link rel="prefetch" href="/manoeasy/assets/js/23.8325e7cd.js"><link rel="prefetch" href="/manoeasy/assets/js/24.563d8cc2.js"><link rel="prefetch" href="/manoeasy/assets/js/25.fc31765f.js"><link rel="prefetch" href="/manoeasy/assets/js/26.c8e63e62.js"><link rel="prefetch" href="/manoeasy/assets/js/28.f313e7c8.js"><link rel="prefetch" href="/manoeasy/assets/js/29.8201baa8.js"><link rel="prefetch" href="/manoeasy/assets/js/30.702cf160.js"><link rel="prefetch" href="/manoeasy/assets/js/31.2c8a92f6.js"><link rel="prefetch" href="/manoeasy/assets/js/32.a2d85e43.js"><link rel="prefetch" href="/manoeasy/assets/js/33.4ab3b2bb.js"><link rel="prefetch" href="/manoeasy/assets/js/34.ca38b0d3.js"><link rel="prefetch" href="/manoeasy/assets/js/35.7de7630a.js"><link rel="prefetch" href="/manoeasy/assets/js/36.0d78269f.js"><link rel="prefetch" href="/manoeasy/assets/js/37.45d789f0.js"><link rel="prefetch" href="/manoeasy/assets/js/38.796c3cfd.js"><link rel="prefetch" href="/manoeasy/assets/js/6.bf63a2b7.js"><link rel="prefetch" href="/manoeasy/assets/js/7.a765d265.js"><link rel="prefetch" href="/manoeasy/assets/js/8.c83e8202.js"><link rel="prefetch" href="/manoeasy/assets/js/9.a0094280.js"><link rel="prefetch" href="/manoeasy/assets/js/vendors~flowchart.782f637e.js"><link rel="prefetch" href="/manoeasy/assets/js/vendors~notification.947e9dbe.js">
    <link rel="stylesheet" href="/manoeasy/assets/css/0.styles.be905fd2.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/manoeasy/" class="home-link router-link-active"><img src="/manoeasy/images/logo.png" alt="manoeasy" class="logo"> <span class="site-name can-hide">manoeasy</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/manoeasy/guide/" class="nav-link router-link-active">
  &lt;i class=&quot;el-icon-info&quot;&gt;&lt;/i&gt;指南
</a></div><div class="nav-item"><a href="/manoeasy/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/manoeasy/github/" class="nav-link">
  项目
</a></div><div class="nav-item"><a href="/manoeasy/issue/" class="nav-link">
  issue
</a></div> <a href="https://github.com/algate/manoeasy" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/manoeasy/guide/" class="nav-link router-link-active">
  &lt;i class=&quot;el-icon-info&quot;&gt;&lt;/i&gt;指南
</a></div><div class="nav-item"><a href="/manoeasy/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/manoeasy/github/" class="nav-link">
  项目
</a></div><div class="nav-item"><a href="/manoeasy/issue/" class="nav-link">
  issue
</a></div> <a href="https://github.com/algate/manoeasy" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>指南</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/manoeasy/guide/" aria-current="page" class="sidebar-link">说明</a></li><li><a href="/manoeasy/guide/getting-started.html" class="sidebar-link">快速上手</a></li><li><a href="/manoeasy/guide/directory-structure.html" class="sidebar-link">目录结构</a></li><li><a href="/manoeasy/guide/basic-config.html" class="sidebar-link">基本配置</a></li><li><a href="/manoeasy/guide/assets.html" class="sidebar-link">静态资源</a></li><li><a href="/manoeasy/guide/markdown.html" class="sidebar-link">Markdown 拓展</a></li><li><a href="/manoeasy/guide/using-vue.html" class="sidebar-link">在 Markdown 中 使用 Vue</a></li><li><a href="/manoeasy/guide/i18n.html" class="sidebar-link">多语言支持</a></li><li><a href="/manoeasy/guide/deploy.html" aria-current="page" class="active sidebar-link">部署</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/manoeasy/guide/deploy.html#云开发-cloudbase" class="sidebar-link">云开发 CloudBase</a></li><li class="sidebar-sub-header"><a href="/manoeasy/guide/deploy.html#github-pages" class="sidebar-link">GitHub Pages</a></li><li class="sidebar-sub-header"><a href="/manoeasy/guide/deploy.html#netlify" class="sidebar-link">Netlify</a></li><li class="sidebar-sub-header"><a href="/manoeasy/guide/deploy.html#google-firebase" class="sidebar-link">Google Firebase</a></li><li class="sidebar-sub-header"><a href="/manoeasy/guide/deploy.html#surge" class="sidebar-link">Surge</a></li><li class="sidebar-sub-header"><a href="/manoeasy/guide/deploy.html#heroku" class="sidebar-link">Heroku</a></li><li class="sidebar-sub-header"><a href="/manoeasy/guide/deploy.html#vercel" class="sidebar-link">Vercel</a></li><li class="sidebar-sub-header"><a href="/manoeasy/guide/deploy.html#_21-云盒子" class="sidebar-link">21 云盒子</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>深入</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/manoeasy/guide/frontmatter.html" class="sidebar-link">Front Matter</a></li><li><a href="/manoeasy/guide/permalinks.html" class="sidebar-link">永久链接</a></li><li><a href="/manoeasy/guide/markdown-slot.html" class="sidebar-link">Markdown 插槽</a></li><li><a href="/manoeasy/guide/global-computed.html" class="sidebar-link">全局计算属性</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="部署"><a href="#部署" class="header-anchor">#</a> 部署</h1> <p>下述的指南基于以下条件：</p> <ul><li>文档放置在项目的 <code>docs</code> 目录中；</li> <li>使用的是默认的构建输出位置；</li> <li>VuePress 以本地依赖的形式被安装到你的项目中，并且配置了如下的 npm scripts:</li></ul> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;docs:build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress build docs&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="云开发-cloudbase"><a href="#云开发-cloudbase" class="header-anchor">#</a> 云开发 CloudBase</h2> <p><a href="https://cloudbase.net/?site=vuepress" target="_blank" rel="noopener noreferrer">云开发 CloudBase<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 是一个云原生一体化的 Serverless 云平台，支持静态网站、容器等多种托管能力，并提供简便的部署工具 <a href="https://cloudbase.net/framework.html?site=vuepress" target="_blank" rel="noopener noreferrer">CloudBase Framework<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 来一键部署应用。</p> <ol><li>全局安装 CloudBase  CLI</li></ol> <div class="language- line-numbers-mode"><pre class="language-text"><code>npm install -g @cloudbase/cli
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ol start="2"><li>在项目根目录运行以下命令一键部署 VuePress 应用，在部署之前可以先 <a href="https://console.cloud.tencent.com/tcb/env/index?tdl_anchor=ad&amp;tdl_site=vuejs" target="_blank" rel="noopener noreferrer">开通环境<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>：</li></ol> <div class="language- line-numbers-mode"><pre class="language-text"><code>cloudbase init --without-template
cloudbase framework:deploy
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>CloudBase CLI 首先会跳转到控制台进行登录授权，然后将会交互式进行确认</p> <p>确认信息后会立即进行部署，部署完成后，可以获得一个自动 SSL，CDN 加速的网站应用，你也可以搭配使用 Github Action 来持续部署 Github 上的 VuePress 应用。</p> <p>也可以使用 <code>cloudbase init --template vuepress</code> 快速创建和部署一个新的 VuePress 应用</p> <p>更多详细信息请查看 CloudBase Framework 的<a href="https://github.com/TencentCloudBase/cloudbase-framework?site=vuepress#%E9%A1%B9%E7%9B%AE%E7%A4%BA%E4%BE%8B" target="_blank" rel="noopener noreferrer">部署项目示例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="github-pages"><a href="#github-pages" class="header-anchor">#</a> GitHub Pages</h2> <ol><li><p>在 <code>docs/.vuepress/config.js</code> 中设置正确的 <code>base</code>。</p> <p>如果你打算发布到 <code>https://&lt;USERNAME&gt;.github.io/</code>，则可以省略这一步，因为 <code>base</code> 默认即是 <code>&quot;/&quot;</code>。</p> <p>如果你打算发布到 <code>https://&lt;USERNAME&gt;.github.io/&lt;REPO&gt;/</code>（也就是说你的仓库在 <code>https://github.com/&lt;USERNAME&gt;/&lt;REPO&gt;</code>），则将 <code>base</code> 设置为 <code>&quot;/&lt;REPO&gt;/&quot;</code>。</p></li> <li><p>在你的项目中，创建一个如下的 <code>deploy.sh</code> 文件（请自行判断去掉高亮行的注释）:</p></li></ol> <div class="language-bash line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br><br><br><br><div class="highlighted"> </div><br><br><div class="highlighted"> </div><br><br><br></div><pre class="language-bash"><code><span class="token shebang important">#!/usr/bin/env sh</span>

<span class="token comment"># 确保脚本抛出遇到的错误</span>
<span class="token builtin class-name">set</span> -e

<span class="token comment"># 生成静态文件</span>
<span class="token function">npm</span> run docs:build

<span class="token comment"># 进入生成的文件夹</span>
<span class="token builtin class-name">cd</span> docs/.vuepress/dist

<span class="token comment"># 如果是发布到自定义域名</span>
<span class="token comment"># echo 'www.example.com' &gt; CNAME</span>

<span class="token function">git</span> init
<span class="token function">git</span> <span class="token function">add</span> -A
<span class="token function">git</span> commit -m <span class="token string">'deploy'</span>

<span class="token comment"># 如果发布到 https://&lt;USERNAME&gt;.github.io</span>
<span class="token comment"># git push -f git@github.com:&lt;USERNAME&gt;/&lt;USERNAME&gt;.github.io.git master</span>

<span class="token comment"># 如果发布到 https://&lt;USERNAME&gt;.github.io/&lt;REPO&gt;</span>
<span class="token comment"># git push -f git@github.com:&lt;USERNAME&gt;/&lt;REPO&gt;.git master:gh-pages</span>

<span class="token builtin class-name">cd</span> -
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>你可以在你的持续集成的设置中，设置在每次 push 代码时自动运行上述脚本。</p></div> <h3 id="github-pages-and-travis-ci"><a href="#github-pages-and-travis-ci" class="header-anchor">#</a> GitHub Pages and Travis CI</h3> <ol><li><p>在 <code>docs/.vuepress/config.js</code> 中设置正确的 <code>base</code>。</p> <p>如果你打算发布到 <code>https://&lt;USERNAME or GROUP&gt;.github.io/</code>，则可以省略这一步，因为 <code>base</code> 默认即是 <code>&quot;/&quot;</code>。</p> <p>如果你打算发布到 <code>https://&lt;USERNAME or GROUP&gt;.github.io/&lt;REPO&gt;/</code>（也就是说你的仓库在 <code>https://github.com/&lt;USERNAME&gt;/&lt;REPO&gt;</code>），则将 <code>base</code> 设置为 <code>&quot;/&lt;REPO&gt;/&quot;</code>。</p></li> <li><p>在项目的根目录创建一个名为 <code>.travis.yml</code> 的文件；</p></li> <li><p>在本地执行 <code>yarn</code> 或 <code>npm install</code> 并且提交生成的 lock 文件（即 <code>yarn.lock</code> 或 <code>package-lock.json</code>）；</p></li> <li><p>使用 GitHub Pages 部署提供程序模板并遵循 <a href="https://docs.travis-ci.com/user/deployment/pages/" target="_blank" rel="noopener noreferrer">Travis 文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></li></ol> <div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token key atrule">language</span><span class="token punctuation">:</span> node_js
<span class="token key atrule">node_js</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> lts/*
<span class="token key atrule">install</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> yarn install <span class="token comment"># npm ci</span>
<span class="token key atrule">script</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> yarn docs<span class="token punctuation">:</span>build <span class="token comment"># npm run docs:build</span>
<span class="token key atrule">deploy</span><span class="token punctuation">:</span>
  <span class="token key atrule">provider</span><span class="token punctuation">:</span> pages
  <span class="token key atrule">skip_cleanup</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
  <span class="token key atrule">local_dir</span><span class="token punctuation">:</span> docs/.vuepress/dist
  <span class="token key atrule">github_token</span><span class="token punctuation">:</span> $GITHUB_TOKEN <span class="token comment"># 在 GitHub 中生成，用于允许 Travis 向你的仓库推送代码。在 Travis 的项目设置页面进行配置，设置为 secure variable</span>
  <span class="token key atrule">keep_history</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
  <span class="token key atrule">on</span><span class="token punctuation">:</span>
    <span class="token key atrule">branch</span><span class="token punctuation">:</span> master
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="gitlab-pages-and-gitlab-ci"><a href="#gitlab-pages-and-gitlab-ci" class="header-anchor">#</a> GitLab Pages and GitLab CI</h3> <ol><li><p>在 <code>docs/.vuepress/config.js</code> 中设置正确的 <code>base</code>。</p> <p>如果你打算发布到 <code>https://&lt;USERNAME or GROUP&gt;.gitlab.io/</code>，则可以省略这一步，因为 <code>base</code> 默认即是 <code>&quot;/&quot;</code>。</p> <p>如果你打算发布到 <code>https://&lt;USERNAME or GROUP&gt;.gitlab.io/&lt;REPO&gt;/</code>（也就是说你的仓库在 <code>https://gitlab.com/&lt;USERNAME&gt;/&lt;REPO&gt;</code>），则将 <code>base</code> 设置为 <code>&quot;/&lt;REPO&gt;/&quot;</code>。</p></li> <li><p>在 <code>.vuepress/config.js</code> 中将 <code>dest</code> 设置为 <code>public</code>。</p></li> <li><p>在你项目的根目录下创建一个名为 <code>.gitlab-ci.yml</code> 的文件，无论何时你提交了更改，它都会帮助你自动构建和部署：</p></li></ol> <div class="language-yaml line-numbers-mode"><pre class="language-yaml"><code><span class="token key atrule">image</span><span class="token punctuation">:</span> node<span class="token punctuation">:</span>9.11.1

<span class="token key atrule">pages</span><span class="token punctuation">:</span>
 <span class="token key atrule">cache</span><span class="token punctuation">:</span>
   <span class="token key atrule">paths</span><span class="token punctuation">:</span>
   <span class="token punctuation">-</span> node_modules/

 <span class="token key atrule">script</span><span class="token punctuation">:</span>
 <span class="token punctuation">-</span> yarn install <span class="token comment"># npm install</span>
 <span class="token punctuation">-</span> yarn docs<span class="token punctuation">:</span>build <span class="token comment"># npm run docs:build</span>
 <span class="token key atrule">artifacts</span><span class="token punctuation">:</span>
   <span class="token key atrule">paths</span><span class="token punctuation">:</span>
   <span class="token punctuation">-</span> public
 <span class="token key atrule">only</span><span class="token punctuation">:</span>
 <span class="token punctuation">-</span> master
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="netlify"><a href="#netlify" class="header-anchor">#</a> Netlify</h2> <ol><li>在 Netlify 中, 创建一个新的 GitHub 项目，使用以下设置：</li></ol> <ul><li><strong>Build Command:</strong> <code>yarn docs:build</code> 或者 <code>npm run docs:build</code></li> <li><strong>Publish directory:</strong> <code>docs/.vuepress/dist</code></li></ul> <ol start="2"><li>点击 deploy 按钮！</li></ol> <h2 id="google-firebase"><a href="#google-firebase" class="header-anchor">#</a> Google Firebase</h2> <ol><li><p>请确保你已经安装了 <a href="https://www.npmjs.com/package/firebase-tools" target="_blank" rel="noopener noreferrer">firebase-tools<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></li> <li><p>在你项目的根目录下创建 <code>firebase.json</code> 和 <code>.firebaserc</code>，并包含以下内容：</p></li></ol> <p><code>firebase.json</code>:</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
 <span class="token property">&quot;hosting&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
   <span class="token property">&quot;public&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./docs/.vuepress/dist&quot;</span><span class="token punctuation">,</span>
   <span class="token property">&quot;ignore&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
 <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><code>.firebaserc</code>:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
 <span class="token string">&quot;projects&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
   <span class="token string">&quot;default&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&lt;YOUR_FIREBASE_ID&gt;&quot;</span>
 <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="3"><li>在执行了 <code>yarn docs:build</code> 或 <code>npm run docs:build</code> 后, 使用 <code>firebase deploy</code> 指令来部署。</li></ol> <h2 id="surge"><a href="#surge" class="header-anchor">#</a> Surge</h2> <ol><li><p>首先，假设你已经安装了 <a href="https://www.npmjs.com/package/surge" target="_blank" rel="noopener noreferrer">surge<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>；</p></li> <li><p>运行 <code>yarn docs:build</code> 或者 <code>npm run docs:build</code>；</p></li> <li><p>想要使用 surge 来部署，你可以运行： <code>surge docs/.vuepress/dist</code>；</p></li></ol> <p>你也可以通过 <code>surge docs/.vuepress/dist yourdomain.com</code> 来部署到 <a href="http://surge.sh/help/adding-a-custom-domain" target="_blank" rel="noopener noreferrer">自定义域名<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="heroku"><a href="#heroku" class="header-anchor">#</a> Heroku</h2> <ol><li><p>首先安装 <a href="https://devcenter.heroku.com/articles/heroku-cli" target="_blank" rel="noopener noreferrer">Heroku CLI<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>；</p></li> <li><p><a href="https://signup.heroku.com" target="_blank" rel="noopener noreferrer">在这里<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 注册一个 Heroku 账号；</p></li> <li><p>运行 <code>heroku login</code> 并填写你的 Heroku 证书：</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code>heroku login
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p>在你的项目根目录中，创建一个名为 <code>static.json</code> 的文件，并包含下述内容：</p></li></ol> <p><code>static.json</code>:</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">&quot;root&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./docs/.vuepress/dist&quot;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>这里是你项目的配置，请参考 <a href="https://github.com/heroku/heroku-buildpack-static" target="_blank" rel="noopener noreferrer">heroku-buildpack-static<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 了解更多。</p> <ol start="5"><li>配置 Heroku 的 git 远程仓库：</li></ol> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 版本变化</span>
<span class="token function">git</span> init
<span class="token function">git</span> <span class="token function">add</span> <span class="token builtin class-name">.</span>
<span class="token function">git</span> commit -m <span class="token string">&quot;My site ready for deployment.&quot;</span>

<span class="token comment"># 以指定的名称创建一个新的 heroku 应用</span>
heroku apps:create example

<span class="token comment"># 为静态网站设置构建包</span>
heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ol start="6"><li>部署你的网站：</li></ol> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 发布网站</span>
<span class="token function">git</span> push heroku master

<span class="token comment"># 打开浏览器查看 Helku CI 的 dashboard</span>
heroku <span class="token function">open</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="vercel"><a href="#vercel" class="header-anchor">#</a> Vercel</h2> <p>请查看 <a href="https://vercel.com/guides/deploying-vuepress-to-vercel" target="_blank" rel="noopener noreferrer">用 Vercel 创建和部署一个 VuePress 应用<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h2 id="_21-云盒子"><a href="#_21-云盒子" class="header-anchor">#</a> 21 云盒子</h2> <p>请查看 <a href="https://www.21yunbox.com/docs/#/deploy-vuepress" target="_blank" rel="noopener noreferrer">21 云盒子 - 部署一个 VuePress 静态网页<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/algate/manoeasy/edit/main/manoeasy/docs/docs/guide/deploy.md" target="_blank" rel="noopener noreferrer">在 GitHub 上编辑此页</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">最后更新:</span> <span class="time">10/28/2020, 10:08:53 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/manoeasy/guide/i18n.html" class="prev">
        多语言支持
      </a></span> <span class="next"><a href="/manoeasy/guide/frontmatter.html">
        Front Matter
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-14a98f9d data-v-14a98f9d><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-14a98f9d><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-14a98f9d></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-14a98f9d></path></svg></div><!----></div></div>
    <script src="/manoeasy/assets/js/app.af965ea1.js" defer></script><script src="/manoeasy/assets/js/4.127e46f3.js" defer></script><script src="/manoeasy/assets/js/27.cb0519da.js" defer></script><script src="/manoeasy/assets/js/5.49171081.js" defer></script>
  </body>
</html>
